<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/shopCart.css">
</head>
<body>
   <div id="app">
       <!--头部区域-->
       <div class="header">
           <a href="index.html" class="icon_back"></a>
           <h3>购物车</h3>
           <a href="" class="icon_menu"></a>
       </div>
       <!--安全提示-->
       <div class="jd_safe_tip">
           <p class="tip_word">
               您正在安全购物环境中，请放心购物
           </p>
       </div>
       <!--中间的列表-->
       <main class="jd_shopCart_list">
           <section v-for="(shop, index) in shopListArr">
               <div class="shopCart_list_title">
                   <span class="cart_logo"></span>
                   <span class="cart_title">京东自营</span>
                   <span class="cart_sale">您享受满100元免运费服务</span>
               </div>
               <div class="shopCart_list_con">
                   <div class="list_con_left">
                       <a href="javascript:;" class="cart_check_box" :checked="shop.checked" @click="singerShopSelected(shop)"></a>
                   </div>
                   <div class="list_con_right">
                       <div class="shop_img">
                           <img :src="shop.shopImage" alt="shop.shopName">
                       </div>
                       <div class="shop_con">
                           <a href="" v-text="shop.shopName"></a>
                           <div class="shop_price">
                               <div class="singer">{{shop.shopPrice | moneyFormat(shop.shopPrice)}}</div>
                               <div class="total">{{shop.shopNumber * shop.shopPrice | moneyFormat(shop.shopNumber * shop.shopPrice)}}</div>
                           </div>
                           <div class="shop_deal">
                               <div class="shop_deal_left">
                                   <span @click="singerShopPrice(shop, false)">-</span>
                                   <input type="tel" value="shop.shopNumber" v-model="shop.shopNumber">
                                   <span @click="singerShopPrice(shop, true)">+</span>
                               </div>
                               <div class="shop_deal_right" @click="clickTrash(shop)">
                                   <span></span>
                                   <span></span>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
           </section>
       </main>
       <!--底部通栏-->
       <div id="tab_bar">
           <div class="tab-bar-left">
               <a href="javascript:;" class="cart_check_box" :checked="isSelectedAll" @click="selectedAll(isSelectedAll)"></a>
               <span style="font-size: 16px;">全选</span>
               <div class="select-all">
                   合计：<span class="total-price">{{totalPrice |  moneyFormat(totalPrice)}}</span>
               </div>
           </div>
           <div class="tab-bar-right">
               <a href="index.html" class="pay">去结算</a>
           </div>
       </div>
       <!--弹出面板-->
       <div class="panel" :class="{'panel_is_show': isHideDelPanel}">
           <div class="panel_content">
               <div class="panel_title">您确认删除这个商品吗?</div>
               <div class="panel_footer">
                   <button class="cancel" @click="isHideDelPanel = true">取消</button>
                   <button class="submit" @click="delShop()">确定</button>
               </div>
           </div>
       </div>
   </div>

<script src="lib/vue.js"></script>
<script src="lib/vue-resource.js"></script>
<script src="js/base.js"></script>
<script src="js/shopCart.js"></script>
<script src="js/shopCartloop.js"></script>
</body>
</html>